﻿<template>
  <div>
    <template v-if = "widget.type == 'table'">
      <div class = 'page_tableContent'  v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data = 'widget.tableData' :style = "{width: widget.options.width}" style = 'margin-bottom: 20px;' :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem) in widget.tableColumn' :key = 'tableItem.indexName' :label = 'tableItem.text' show-overflow-tooltip
          :width = "(Object.keys(tableItem).indexOf('isFile') !== -1 && tableItem.isFile) ? '100px' : 'auto'">
            <template slot-scope = 'scope'>
              <span v-if = "Object.keys(tableItem).indexOf('isFile') !== -1 && tableItem.isFile" class = 'editStatus' @click = 'clickRowOfFile(scope.row[tableItem.indexName])'>点击查看</span>
              <span v-else-if = "Object.keys(tableItem).indexOf('isBoolean') !== -1 && tableItem.isBoolean">{{scope.row[tableItem.indexName] ? '是' : '否'}}</span>
              <span v-else>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column align = 'center' v-if = "widget.options.rowEvents && widget.options.rowEvents.length && Object.keys(widget.options.rowEvents[0]).length" :width = "Object.keys(widget.options.rowEvents[0]).length > 4 ? '398px' : '180px'" label = '操作'>
            <template slot-scope = 'scope'>
              <template v-for = "(value, name, index) in widget.options.rowEvents[0]">
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                  v-if = "name === 'activeTable' && value.length && !scope.row.rowEventHideExpress.activeTable">
                  <span><i class='iconfont icon-qiyong'></i>启用</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'deactiveTable' && value.length && !scope.row.rowEventHideExpress.deactiveTable">
                  <span><i class='iconfont icon-tingyong'></i>停用</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'selfDefineTable_export' && value.length && !scope.row.rowEventHideExpress.selfDefineTable_export">
                  <span><i class='iconfont icon-icon--'></i>导出</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'editTable' && value.length && !scope.row.rowEventHideExpress.editTable">
                  <span><i class='iconfont icon-bianji'></i>编辑</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'deleteTable' && value.length && !scope.row.rowEventHideExpress.deleteTable">
                  <span><i class='iconfont icon-shanchu'></i>删除</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'preview' && value.length && !scope.row.rowEventHideExpress.preview">
                  <span><i class='iconfont icon-yanj'></i>查看</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'showDetail' && value.length">
                  <span><i class='iconfont icon-yanj'></i>详细</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'handleWorkflowPage' && value.length && !scope.row.rowEventHideExpress.handleWorkflowPage">
                  <span><i class='iconfont icon-zidingyi'></i>办理</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefOpenPage_') !== -1 || name.indexOf('slefPage_') !== -1) && value.length  && !scope.row.rowEventHideExpress[name]">
                  <span><i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}</span>
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 页码 -->
    <template v-else-if = "widget.type == 'pagination'">
      <el-pagination
      background v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden"
      @size-change = "(pageSizeVal) => {handleSizeChange(pageSizeVal, widget)}"
      @current-change = "(pageSizeVal) => {handleCurrentChange(pageSizeVal, widget)}"
      :current-page.sync = "widget.options.currentPage"
      :page-size = 'widget.options.pageSize'
      :pager-count = "5"
      :page-sizes = "[10, 25, 50, 100]"
      layout = "total, sizes, prev, pager, next"
      :total = 'widget.options.totalLength'>
      </el-pagination>
    </template>
    <template v-if = "widget.type == 'listBoxTable'">
      <div class = 'page_tableContent'  v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <list-box-table :myConfig="widget.options" v-model="dataModel" :ref="widget.key" @leftChanged="listBoxTableChanged" @handleRowEvent="triggerRowEvent"></list-box-table>
      </div>
    </template>
    <!-- 按钮 -->
    <template v-else-if = "widget.type == 'bottomButton'">
      <div :style = "{'text-align': Object.keys(widget.options).indexOf('textAlign') !== -1 ? widget.options.textAlign : 'left'}"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-button :type = "widget.options.type" :disabled = "widget.options.disabled" @click = 'triggerClickEvent(widget)'>{{widget.name}}</el-button>
      </div>
    </template>
    <template v-else>
      <el-form-item v-if = "(dialogType !== 'showDetail' || widget.model !== '$_Remark') && (Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden)"
      :label = "(widget.type === 'button' || !widget.options.showLabel) ? '' : widget.name" :prop = "widget.model"
      :class = "(widget.type === 'button' || !widget.options.showLabel) ? 'form_noLeftMargin' : ''">
        <template v-if = "widget.type == 'input'" >
          <el-input v-model = "dataModel" :placeholder = "widget.options.placeholder" :style = "{width: widget.options.width}"
          :disabled = "widget.options.disabled" :clearable = "widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false">
            <el-button slot = "append" @click = "setLinkageOptions(widget.options.linkageOption, widget)"
            v-if = "Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType === 'eventRender'"  title = '点击触发联动效果'>
              <i class= 'iconfont icon-zidingyi'></i>
            </el-button>
          </el-input>
        </template>

        <template v-if = "widget.type == 'textarea'">
          <el-input type = "textarea" v-model = "dataModel" :disabled = "widget.options.disabled" :placeholder = "widget.options.placeholder" :style = "{width: widget.options.width}"
          :autosize = "widget.options.autosize" :clearable = "widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false"></el-input>
        </template>

        <template v-if = "widget.type == 'select'">
          <el-select v-model = "dataModel" :class = "widget.options.disabled ? 'select_disabled' : ''" :multiple = "widget.options.multiple" :clearable = "widget.options.clearable"
          :placeholder = "widget.options.placeholder" :style = "{width: widget.options.width}" :filterable = "widget.options.filterable" collapse-tags
          @change = "() => {(Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage) ? setLinkageOptions(widget.options.linkageOption, widget) : ''}">
            <el-option :disabled = "widget.options.disabled" v-for = "item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
          </el-select>
        </template>

        <!-- 富文本输入框/地图经纬度/图片位置拾取 -->
        <template v-if = "widget.type == 'JSONEditor' || widget.type == 'MD' || widget.type == 'RichText' || widget.type == 'MapXY' || widget.type == 'PicXY' || widget.type == 'GIS_Draw_Line'">
          <el-input v-model = "dataModel" v-if = "widget.options.disabled && widget.type != 'JSONEditor' && widget.type != 'MD' && widget.type != 'RichText'" disabled></el-input>
          <el-input value = '点击查看或编辑内容' v-else @focus = 'editElementData(widget)'></el-input>
        </template>

        <template v-if = "widget.type == 'number'">
          <el-input-number v-model = "dataModel" :style = "{width: widget.options.width}" :step="widget.options.step" controls-position = "widget.options.controlsPosition"
          :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision = "widget.options.precision" :disabled="widget.options.disabled"
          :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'" :controls = 'widget.options.controlsShow'
          @change = "() => {(Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage) ? setLinkageOptions(widget.options.linkageOption, widget) : ''}"></el-input-number>
        </template>

        <template v-if = "widget.type == 'radio'">
          <el-radio-group v-model = "dataModel" :style = "{width: widget.options.width}" :disabled = "widget.options.disabled">
            <el-radio :style = "{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label = "item.value" v-for = "(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key = "index"
            >
              <template>{{item.label}}</template>
            </el-radio>
          </el-radio-group>
        </template>
        <template v-if = "widget.type == 'checkbox'">
          <el-checkbox-group v-model = "dataModel" :style = "{width: widget.options.width}" :disabled = "widget.options.disabled">
            <el-checkbox  :style = "{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label = "item.value" v-for = "(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
            >
              <template>{{item.label}}</template>
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <template v-if = "widget.type == 'time'">
          <el-time-picker v-model = "dataModel" :is-range = "widget.options.isRange" :placeholder = "widget.options.placeholder" :start-placeholder = "widget.options.startPlaceholder"
          :end-placeholder = "widget.options.endPlaceholder" :disabled = "widget.options.disabled" :editable = "widget.options.editable"
          :clearable = "widget.options.clearable" :range-separator = "widget.options.rangeSeparator" :value-format = "widget.options.format" :style = "{width: widget.options.width}">
          </el-time-picker>
        </template>

        <template v-if = "widget.type == 'date'">
          <el-date-picker v-model = "dataModel" :type = "widget.options.type" :placeholder = "widget.options.placeholder" :start-placeholder = "widget.options.startPlaceholder"
          :end-placeholder = "widget.options.endPlaceholder" :disabled = "widget.options.disabled" :editable = "widget.options.editable"
          :clearable = "widget.options.clearable" :format = "widget.options.format" :value-format = "widget.options.format" :style = "{width: widget.options.width}">
          </el-date-picker>
        </template>

        <template v-if = "widget.type == 'rate'">
          <el-rate v-model = "dataModel" :max = "widget.options.max" :disabled = "widget.options.disabled" :allow-half = "widget.options.allowHalf"
          :show-score = "widget.options.showScore"></el-rate>
        </template>

        <template v-if = "widget.type == 'color'">
          <el-color-picker v-model = "dataModel" :disabled = "widget.options.disabled" :show-alpha = "widget.options.showAlpha"></el-color-picker>
        </template>

        <template v-if = "widget.type == 'switch'">
          <el-switch v-model = "dataModel" :disabled = "widget.options.disabled"></el-switch>
        </template>

        <template v-if = "widget.type == 'slider'">
          <el-slider  v-model = "dataModel" :min = "widget.options.min" :max = "widget.options.max" :disabled = "widget.options.disabled"
          :step = "widget.options.step" :show-input = "widget.options.showInput"
          :range = "widget.options.range"
          :style = "{width: widget.options.width}"></el-slider>
        </template>

        <template v-if = "widget.type == 'imgupload'">
          <fm-upload
            :dataModel.sync = "dataModel"
            :widget = 'widget'
            :changeModels = 'changeModels'
          >
          </fm-upload>
        </template>

        <!-- video输入框 -->
        <template v-if = "widget.type == 'Video' && !widget.options.disabled">
          <Video-Upload fileType = 'video' :fileData.sync = 'dataModel' :fileLimit = '1'
          :fileInit = 'changeModels' :fileEditable = '!widget.options.disabled'></Video-Upload>
        </template>
        <template v-if = "widget.type == 'Video' && widget.options.disabled">
          <!-- <a :href = "dataModel" target = '_blank' title = '点击查看视频'
          :style = "{width: widget.options.width}" style = {overflow:hidden,line-height:1,display:block}>{{dataModel}}</a> -->
          <video :src = "dataModel | srcFormatting(dataModel)" width = '90%' height = '300' controls></video>
        </template>

        <template v-if = "widget.type == 'button'">
          <el-button :disabled = "widget.options.disabled" :type = "widget.options.type">{{widget.name}}</el-button>
        </template>

        <!-- 可编辑的表格 -->
        <template v-if = "widget.type == 'editTable'">
          <div class="addColumn" v-if = "dialogType !== 'showDetail' && (Object.keys(widget.options).indexOf('showAdd') === -1 ? !widget.options.disabled : widget.options.showAdd)">
            <p @click = "handleAddEditTableData(widget)"> <i class="iconfont icon-add"></i>添加数据</p>
          </div>
          <el-table :data = 'dataModel' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border' empty-text = "暂无数据，请添加" class = 'editTable'>
            <el-table-column align = "center" v-for = '(item, index) in widget.tableColumn' :key = 'index' :label = 'item.text' show-overflow-tooltip>
              <template slot-scope = "scope">
                <span v-if = "item.uiType === 'richText'" class = 'clickStatus' @click = "rowDataInfo(scope.$index, widget, item.indexName, scope.row)">...</span>
                <span v-if = "item.uiType === 'singleSelect' || item.uiType === 'multiSelect'" class = 'clickStatus' @click = "rowDataInfo(scope.$index, widget, item.indexName, scope.row)">{{scope.row[item.indexName + '_$SHOW']}}</span>
                <span v-else-if = "item.uiType === 'label'">{{scope.row[item.indexName]}}</span>
                <span v-else-if = "item.uiType === 'switch'" class = 'clickStatus' @click = "rowDataInfo(scope.$index, widget, item.indexName, scope.row)">{{ typeof scope.row[item.indexName] === 'boolean' ? (scope.row[item.indexName] ? '是' : '否') : ''}}</span>
                <span v-else-if = "item.uiType === 'file' || item.uiType === 'readFile'" class = 'clickStatus' @click = "rowDataInfo(scope.$index, widget, item.indexName, scope.row)"><i class='el-icon-document'></i></span>
                <span v-else class = 'clickStatus' @click = "rowDataInfo(scope.$index, widget, item.indexName, scope.row)">{{scope.row[item.indexName]}}</span>
              </template>
            </el-table-column>
            <el-table-column align = "center" label="操作" width = "60" v-if = "dialogType !== 'showDetail' && (Object.keys(widget.options).indexOf('showAdd') === -1 ? !widget.options.disabled : widget.options.showAdd)">
              <template slot-scope = "scope">
                <el-button type = "text" size="mini" @click = "handleRemoveEditTableData(widget, scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
    </template>
    <!-- 可编辑的表格的弹窗 -->
    <editTableData :clickIndex = 'clickIndex' :widgetObject = 'widgetObject' :clickName = 'clickName' :currentModels = 'currentModels'
    :editClickRow = 'editClickRow' :showEditTableDataDialog = 'showEditTableDataDialog'
    @giveUp = 'showEditTableDataDialog = false' @sureEditTableData = 'sureEditTableData'></editTableData>
    <!-- 富文本输入框弹窗 -->
    <Tinymce-Dialog :editElementObj = 'editElementObj' :currentPageModelsObj = 'currentPageModelsObj' :showEditElementDataDialog = 'showEditElementDataDialog'
    @sureEditElementData = 'sureEditElementData' @giveUpElementData = 'showEditElementDataDialog = false'></Tinymce-Dialog>
    <!-- 上传文件的弹窗 -->
    <Import-Report-Dialog :showImportDialog = 'showImportDialog' :currentEventsObj = 'currentEventsObj' @closeUploadDialogSuccess = 'closeUploadDialogSuccess' @closeUploadDialog = 'showImportDialog = false'></Import-Report-Dialog>
    <!-- 查看上传文件的弹窗 -->
    <Show-Upload-File-Dialog :showUploadFileDialog_visible = 'showUploadFileDialog_visible' :currentRowFileList = 'currentRowFileList' @closeShowUploadFileDialog = 'showUploadFileDialog_visible = false'></Show-Upload-File-Dialog>
    <!-- 执行事件相关操作 -->
    <WS-Trigger :wsConsoleDialog = 'wsDialogInfo.visible' :wsTitle = 'wsDialogInfo.title' :wsApiRouter = 'wsDialogInfo.wsApiRouter'
    @wsConsoleDialogClosed = 'wsDialogInfo.visible = false'></WS-Trigger>
  </div>
</template>

<script src='./formItemComponents.js'></script>
